import React from 'react';
import {Text} from 'react-native-elements';
import {Overlay} from 'react-native-elements';
import Storage from '../../deviceStorage';
import {NavigationEvents} from 'react-navigation';

class TempOverlay extends React.Component {
  state = {
    isVisible: true,
  };

  componentDidMount(): void {
    this.setState({
      isVisible: true,
    });
    this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      async payload => {
        await Storage.get('token')
          .then(isToken => {
            console.log('isToken：', isToken);
            if (isToken === null || isToken === undefined) {
              this.props.navigation.navigate('Login');
            } else {
              this.props.navigation.navigate('Main');
            }
            this.setState({isVisible: false});
          })
          .catch(err => {
            console.log(err);
          });
      },
    );
  }

  componentWillUnmount(): void {
    this.willFocusSubscription.remove();
  }

  render() {
    return (
      <>
        <NavigationEvents />
        <Overlay
          isVisible={this.state.isVisible}
          windowBackgroundColor="rgba(255, 255, 255, .9)"
          overlayBackgroundColor="#53CAC4"
          width="auto"
          height="auto"
        >
          <Text>Hello from Mr.Lu!!!</Text>
        </Overlay>
      </>
    );
  }
}

export default TempOverlay;
